<template>
  <div id="pay">
    <div class="header"style="background-color: white;">
      <div></div>
      <div>
        <p class="el-icon-close" style="opacity: 0;"></p>
        <p class="">确认订单</p>
        <p class="el-icon-more" style="opacity: 0;"></p>
      </div>
    </div>
    <div class="conten">
      <div>
        <p>订单号：<span>{{PayMent.order_sn}}</span></p>
      </div>
      <div>
        <p>￥<span>{{PayMent.order_amount}}</span></p>
      </div>
    </div>
    <div class="receivables">
      <div>
        <p>收款方</p>
        <p>惠万众平台</p>
      </div>
      <div>
        <p>商品</p>
        <p style="text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">{{PayMent.goods_name}}</p>
      </div>
    </div>
    <div class="pay">
      <el-button type="success" style="width: 87%;margin-left: 24px;height: 48px;font-size: 20px;"@click="payment">立即支付</el-button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import url from 'url'
  import WeixinJSBridge from 'weixin-jsapi'

  export default {
    name: 'Payment',
    data(){
      return{
        PayMent:[],
        out_trade_no:'',
        Pay:[],
      }
    },
    created () {
      let restoredSession = JSON.parse(sessionStorage.getItem('Payment'));
      this.PayMent = restoredSession.data;
      this.Pay = restoredSession.pay;
      let str = this.PayMent.out_trade_no;
      var newStr = str.split('_')
      // console.log(newStr[newStr.length-1]);
      this.out_trade_no = newStr[newStr.length-1];
    },
    methods:{
      // payment(){
      //   // http://39.96.76.3/HuiWanZhong/public/index.php/teamOrder/index/order_paid
      //   axios.get('http://39.96.76.3/HuiWanZhong/public/index.php/teamOrder/index/order_paid?', {
      //     params: {
      //       'log_id':this.out_trade_no,
      //       'Pay_status':'2',
      //       'note':'',
      //       'trade_no':''
      //     },
      //   }).then(response =>{
      //     console.log(response);
      //     this.$router.push({name:'AssMyOrder'});
      //   }).catch(function (error) {
      //     alert(error);
      //   });
      //
      // },

      payment(){
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId":this.Pay.appId,     //公众号名称，由商户传入
            "timeStamp":this.Pay.timeStamp,         //时间戳，自1970年以来的秒数
            "nonceStr":this.Pay.nonceStr, //随机串
            "package":this.Pay.package,
            "signType":this.Pay.signType,         //微信签名方式：
            "paySign":this.Pay.paySign //微信签名
          },
          ((res)=>{
            sessionStorage.setItem('RES', JSON.stringify(res));
            if(res.err_msg == "get_brand_wcpay_request:ok" ){
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              this.$router.push({name:'AssMyOrder'});
            }else {
            };
          }));

        // wx.chooseWXPay({
        //   "appId":this.Pay.appId,     //公众号名称，由商户传入
        //   "timeStamp":this.Pay.timeStamp,         //时间戳，自1970年以来的秒数
        //   "nonceStr":this.Pay.nonceStr, //随机串
        //   "package":this.Pay.package,
        //   "signType":this.Pay.signType,         //微信签名方式：
        //   "paySign":this.Pay.paySign, //微信签名
        //   success: function (res) {
        //     // 支付成功后的回调函数
        //     console.log('pay success');
        //     this.$router.push({name:'AssMyOrder'});
        //   },
        //   error: function (res) {
        //     // 支付失败的回调函数
        //     console.log(res);
        //     //alert(res.errMsg);
        //   }
        // });
      }
    },
  }
</script>

<style scoped>
  #pay{

  }  .header{
    width: 100%;
    height: 65px;
    background-color: #ffffff;
  }  .header div:nth-child(1){
    width: 100%;
    height: 25.5px;
  }.header div:nth-child(2){
    width: 100%;
    height: 31.5px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 5px;
  }  .header div:nth-child(2) p:nth-child(1){
    font-size: 24px;
    font-weight: bold;
    color: black;
    margin-left: 17px;
    position: absolute;
    left: 10px;
  } .header div:nth-child(2) p:nth-child(2){
    font-size: 24px;
    font-weight: bold;
    color: black;
    text-align: center;
  } .header div:nth-child(2) p:nth-child(3){
    font-size: 24px;
    font-weight: bold;
    color: black;
    margin-left: 17px;
    position: absolute;
    right: 10px;
  }.conten{
    width: 100%;
    height: 120px;
    background-color: #f6f6f6;
  }
  .conten div:nth-child(2){
    width: 100%;
    height: 50px;
  }
  .conten div:nth-child(1) p:nth-child(1){
    line-height: 50px;
    font-size: 20px;
    color: #000000;
    text-align: center;
  }
  .conten div:nth-child(2) p:nth-child(1){
    font-size: 43px;
    color: #000000;
    text-align: center;
  }
  .receivables{
    width: 100%;
    height: 107.5px;
    background-color: white;
  }
  .receivables div:nth-child(1){
    display: flex;
    justify-content: space-between;
  } .receivables div:nth-child(2){
    display: flex;
    justify-content: space-between;
  }
  .receivables div:nth-child(1) p:nth-child(1){
    margin-left: 27.5px;
    margin-top: 20px;
    font-size: 17px;
    color: #999;
    margin-bottom: 10px;
  }  .receivables div:nth-child(1) p:nth-child(2){
    margin-right: 27.5px;
    margin-top: 20px;
    font-size: 17px;
    color: #333;
    margin-bottom: 10px;
  } .receivables div:nth-child(2) p:nth-child(1){
    margin-left: 27.5px;
    /*margin-top: 20px;*/
    font-size: 17px;
    color: #999;
    margin-bottom: 10px;
    margin-right: 35px;
  }  .receivables div:nth-child(2) p:nth-child(2){
    margin-right: 27.5px;
    /*margin-top: 20px;*/
    font-size: 17px;
    color: #333;
    margin-bottom: 10px;
    width: 232.5px;
    text-align: right;
  }
  .pay{
    width: 100%;
    height:auto;
    margin-top: 30px;
  }
</style>
